<template>
	<view class="container indexpage">
		<view class="status_bar"></view>
		<u-navbar :is-back="false" :border-bottom="false">
			<text class="addtext-nav" @tap="navigateToposition()">{{getLocationcity|getsubCityname}}</text>
			<!-- <text class="addtext-nav">徐州</text> -->
			<u-search placeholder="请搜索输入关键字" :show-action="false" search-icon-color="rgba(136, 136, 136, 0.5)" bg-color="#fff" border-color="rgba(136, 136, 136, 0.5)" margin="0px 10px"></u-search>
			<u-icon name="chat" color="rgba(136, 136, 136, 0.5)" slot="right"></u-icon>
		</u-navbar>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular='true' class="index_swiper">
			<swiper-item class="index_swiper_item" v-for="(item,index) in bannerList" :key='index'>
					<image :src="item"></image>
			</swiper-item>
		</swiper>
		<!-- 分类栏目 -->
		<view class="index_classification">
			<view class="index_classification_list" v-for="(groupitem,groupindex) in grouplist" :key="groupitem.id" @tap="navigateToindexClass(groupindex)">
				<image :src="groupitem.img"></image>
				<text>{{groupitem.name}}</text>
			</view>
		</view>
		<!-- 文章列表 -->
		<view class="index_article">
			<view class="index_article_list" v-for="(recommenditem,recommendindex) in recommendlist" :key='recommendindex' @tap="navigateToReDetail(recommenditem.id)">
				<image :src="recommenditem.img.split(',')[0]" class="list_img"></image>
				<view class="list_content">
					<text class="content_title">{{recommenditem.title}}</text>
					<view class="content_userInfo">
						<view class="userLick">
							<image src="/static/index/icon_x_xz_16.png"></image>
							<text>{{recommenditem.giveUpCount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loading mode="flower" :show="showload" size="40"></u-loading>
		<text class="getbottom" v-if="isgetbottom">已经到底了</text>
	</view>
</template>

<script>
	import {iconGroupfirstpage} from '@/apis/request.js'
	import {recommendListfp} from '@/apis/request.js'
	import {recommendGiveup} from '@/apis/request.js'
	export default {
		data() {
			return {
				bannerList:['/static/index/banner_1.png','/static/index/banner_1.png','/static/index/banner_1.png'],
				loading:true,
				grouplist:[],
				pageIndex:1,
				pageSize:6,
				recommendlist:[],
				userInfo:{},
				showload:false,
				isgetbottom:false,
				getLocationcity:''
			}
		},
		created() {
			if(!uni.getStorageSync('selectCity')){
				uni.getLocation({
					type:'gcj02',
					altitude:false,
					geocode:true,
					success:(res_locationinfo)=>{
						console.log(res_locationinfo);
						this.getLocationcity=res_locationinfo.address.city;
					},
				});
			}
		},
		onLoad() {
			this.groupForhomepage();
		},
		onShow() {
			this.userInfo=uni.getStorageSync('userInfo');
			if(uni.getStorageSync('selectCity')){
				this.getLocationcity = uni.getStorageSync('selectCity').name;
			}
			this.renovateRecommendlist();
		},
		onReachBottom() {
			this.recommendList();
		},
		methods: {
			navigateToposition(){
				uni.navigateTo({
					url:'position/position' 
				});
			},
			// 首页分类
			groupForhomepage(){
			    this.$http({
					url:iconGroupfirstpage,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res)
					if(res[1].data.status=='200'){
					     this.grouplist=res[1].data.data	
					}
				})
				.catch(err=>{
					console.log(err)
				})
			},
			//首页列表-下拉加载
			recommendList(){
				if(this.isgetbottom){
					return ;
				}
				this.pageIndex++;
				this.showload=true;
				this.$http({
					url:recommendListfp,
					method:"POST",
					data:{
						pageIndex:this.pageIndex,
						pageSize:this.pageSize
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					if(res[1].data.status=='200'){
						setTimeout(()=>{
							if(res[1].data.data.length!=0){
								this.showload=false;
								this.recommendlist=this.recommendlist.concat(res[1].data.data);
							}else{
								if(this.pageIndex!=1){
									//到底了
									this.showload=false;
									this.isgetbottom=true;
								}else{
									//无数据
								}
							}
						},300);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			// onshow刷新
			renovateRecommendlist(){
				this.$http({
					url:recommendListfp,
					method:"POST",
					data:{
						pageIndex:1,
						pageSize:this.pageSize*this.pageIndex
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					if(res[1].data.status=='200'){
						this.recommendlist=res[1].data.data;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//跳转到推荐详情
			navigateToReDetail(recommendid){
				uni.navigateTo({
					url:`indexDetails/indexDetails?recommendid=${recommendid}`
				})
			},
			navigateToindexClass(classindex){
				console.log(classindex)
				switch(classindex){
					case 0:
					   uni.navigateTo({
					   	url:'./hardfitt/hardfitt?id=1'
					   });
					   break;
					case 1:
						uni.navigateTo({
							url:'./hardfitt/hardfitt?id=2'
						});
					   break;
					case 2:
						uni.navigateTo({
							url:'./hardfitt/hardfitt?id=3'
						});
					   break;
					case 3:
					   break;
					case 4:
					   break;
					case 5:
						uni.navigateTo({
							url:'./hardfitt/hardfitt?id=5'
						});
					   break;
					case 5:
					   break;
					case 6:
					   uni.navigateTo({
					   	url:'./findwork/findwork'
					   });
					   break;
					case 7:
					   break;
					 default:
					   break;
				}
			}
		},
		filters:{
			getsubCityname(val){
				if(val.length>4){
					return `${val.substr(0,3)}...`;
				}else{
					return val;
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100;
}
.container{
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.placStyle{
	font-size: 28rpx;
	margin-left: 20rpx;
}
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}
.index_search{
	width: 100%;
	height: 94rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0rpx;
	background-color: #fff;
	z-index: 1000;
	padding: 0 30rpx;
	&_city{
		color: #444444;
		font-size: 28rpx;
	}
	&_input{
		width: 518rpx;
		height: 66rpx;
		padding: 0 26rpx;
		border-radius: 50rpx;
		border: 2rpx solid #c5c5c5;
		display: flex;
		align-items: center;
		input{
			width: 100%;
			height: 100%;
			padding-left:20rpx ;
		}
		&_img{
			width: 31rpx;
			height: 31rpx;
		}
	}
	&_message{
		width: 51rpx;
		height: 41rpx;
	}
}
.index_swiper{
	width: 100%;
	height: 236rpx;
	margin-bottom: 16rpx;
	margin-top: 20rpx;
	&_item{
		display: flex;
		justify-content: center;
		image{
			width: 690rpx;
			height: 100%;
		}
	}
}
.index_classification{
	padding-bottom: 40rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	&_list{
		margin-top: 40rpx;
	}
	&_list,&_list_down{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		image{
			width: 49rpx;
			height: 49rpx;
		}
		text{
			color: #222222;
			font-size: 26rpx;
			margin-top: 22rpx;
		}
	}
}
.index_article{
	border-top: 10rpx solid #F4F8FB;
	padding: 37rpx 20rpx 0 20rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	&_list{
		width: 350rpx;
		height: auto;
		padding-bottom: 22rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(0, 0, 0, 0.07);
		margin-bottom: 15rpx;
		.list_img{
			width: 100%;
			height: 409rpx;
		}
		.list_content{
			width: 100%;
			margin-top: 15rpx;
			.content_title{
				color: #222222;
				font-size: 28rpx;
				font-weight: 500;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				margin-left: 22rpx;
				display: block;
				width: 306rpx;
			}
			.content_userInfo{
				display: flex;
				align-items: center;
				justify-content:flex-end;
				margin-top: 21rpx;
				.userImg{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				.userName{
					flex: 1;
					margin-left: 18rpx;
					color: #888888;
					font-size: 26rpx;
				}
				.userLick{
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					text{
						color: #222222;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
					margin-right: 22rpx;
				}
			}
		}
	}
}
.getbottom{
	color: #888;
	font-size: 30rpx;
	margin-top: 10rpx;
	margin-bottom: 20rpx;
}
.addtext-nav{
	margin-left: 20rpx;
	font-size: 14px;
}
</style>
 